<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="visible"
      width="900px"
      @close="handleClose"
    >
      <div class="main">
        <div class="header">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content">
                【题型】：<span v-if="questionDetail.questionType == 1"
                  >单选题</span
                >
                <span v-else-if="questionDetail.questionType == 2">多选题</span>
                <span v-else>简答题</span>
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【编号】：{{ questionDetail.id }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【难度】：<span v-if="questionDetail.difficulty == 1"
                  >简单</span
                >
                <span v-else-if="questionDetail.difficulty == 2">一般</span>
                <span v-else>困难</span>
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【标签】：{{ questionDetail.tags }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【学科】：{{ questionDetail.subjectName }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【目录】：{{ questionDetail.directoryName }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">
                【方向】：{{ questionDetail.direction }}
              </div></el-col
            >
          </el-row>
        </div>
        <div class="question">
          <div class="title">【题干】：</div>
          <div class="content" v-html="questionDetail.question"></div>
          <div class="options" v-if="questionDetail.questionType == 1">
            <div class="title">单选题 选项：（以下选中的选项为正确答案）</div>
            <div>
              <el-radio-group v-model="radioChecked" disabled>
                <el-radio
                  v-for="item in questionDetail.options"
                  :key="item.id"
                  :label="item.id"
                >
                  {{ item.title }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="options" v-else-if="questionDetail.questionType == 2">
            <div class="title">多选题 选项：（以下选中的选项为正确答案）</div>
            <div class="content">
              <el-checkbox-group v-model="checkedList" disabled>
                <el-checkbox
                  v-for="item in questionDetail.options"
                  :key="item.id"
                  :label="item.id"
                >
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <hr />
          <div class="answer">
            <div class="title">
              【参考答案】：<el-button @click="showVideo = true" type="danger"
                >视频答案预览</el-button
              >
            </div>
            <div class="video" v-if="showVideo">
              <video :src="questionDetail.videoURL" controls></video>
            </div>
          </div>
          <hr />
          <div class="answer-explain">
            【答案解析】：<span v-html="questionDetail.answer"></span>
          </div>
          <hr />
          <div class="answer-remark">
            【题目备注】：{{ questionDetail.remarks }}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionPreview',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      questionDetail: {},
      radioChecked: '',
      checkedList: [],
      showVideo: false
    }
  },
  created () {},
  computed: {},
  methods: {
    // 获取题目详情并提取选框默认选中
    async getQuestionDetail (id) {
      try {
        const res = await detail({ id: id })
        this.questionDetail = res.data
        if (this.questionDetail.questionType === '1') {
          this.radioChecked = this.questionDetail.options.filter((item) => {
            return item.isRight === 1
          })[0]?.id
        }
        if (this.questionDetail.questionType === '2') {
          this.checkedList = this.questionDetail.options
            .filter((item) => {
              return item.isRight === 1
            })
            .map((item) => {
              return item.id
            })
        }
      } catch (err) {
        //
      }
    },
    // 关闭对话框
    handleClose () {
      this.showVideo = false
      this.questionDetail = {}
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang='scss'  scoped>
.el-dialog {
  .main {
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .el-row {
    border-bottom: 1px solid #9a9a9a;
  }
  .el-col {
    border-radius: 4px;
    padding: 10px 0;
  }
  .el-radio {
    display: block;
    padding: 5px 0;
  }
  .el-checkbox {
    display: block;
    padding: 5px 0;
  }
  .grid-content {
    border-radius: 4px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  .question {
    .title {
      padding-top: 10px;
    }
    .content {
      color: #6767ff;
    }
    .options {
      .title {
        padding-top: 0;
        padding-bottom: 10px;
      }
    }
    .answer-explain {
      display: flex;
      align-items: center;
    }
  }
}
</style>
